<script>
	export default {
		onLaunch: function() {
			this.getSystemInfo();
			let token = uni.getStorageSync('logintoken') || '';
			if(token){
				// this.$store.dispatch('getuserInfo');
			}
		},
		onShow: function() {
            
		},
		globalData: {
			
		},
		methods:{
			getSystemInfo(){
				uni.getSystemInfo({
					success: (result) => {
					// 获取手机系统的状态栏高度（不同手机的状态栏高度不同）  （ 不要使用uni-app官方文档的var(--status-bar-height) 官方这个是固定的20px  不对的 ）
					let statusBarHeight = result.statusBarHeight 
                    console.log(result)
					// #ifdef MP
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()		// 获取右侧胶囊的信息 单位px
					//bottom: 胶囊底部距离屏幕顶部的距离//height: 胶囊高度//left:   胶囊左侧距离屏幕左侧的距离
					//right:  胶囊右侧距离屏幕左侧的距离//top:    胶囊顶部距离屏幕顶部的距离//width:  胶囊宽度
					// console.log(menuButtonInfo.width, menuButtonInfo.height, menuButtonInfo.top)
					// console.log('计算胶囊右侧距离屏幕右边距离', result.screenWidth - menuButtonInfo.right)
					let menuWidth = menuButtonInfo.width 
					let menuHeight = menuButtonInfo.height 
					let menuBorderRadius = menuButtonInfo.height / 2 
					let menuRight = result.screenWidth - menuButtonInfo.right 
					let menuTop = menuButtonInfo.top 
					let contentTop = result.statusBarHeight + 44 
                    let windowHeight = result.windowHeight
					let menuInfo = {
					  statusBarHeight: statusBarHeight,//状态栏高度----用来给自定义导航条页面的顶部导航条设计padding-top使用：目的留出系统的状态栏区域
					  menuWidth: menuWidth,//右侧的胶囊宽度--用来给自定义导航条页面的左侧胶囊设置使用
					  menuHeight: menuHeight,//右侧的胶囊高度--用来给自定义导航条页面的左侧胶囊设置使用
					  menuBorderRadius: menuBorderRadius,//一半的圆角--用来给自定义导航条页面的左侧胶囊设置使用
					  menuRight: menuRight,//右侧的胶囊距离右侧屏幕距离--用来给自定义导航条页面的左侧胶囊设置使用
					  menuTop: menuTop,//右侧的胶囊顶部距离屏幕顶部的距离--用来给自定义导航条页面的左侧胶囊设置使用
					  contentTop: contentTop,//内容区距离页面最上方的高度--用来给自定义导航条页面的内容区定位距离使用
                      windowHeight:windowHeight,
					}
					uni.setStorageSync('menuInfo', menuInfo)
					// #endif
				  },
				  fail: (error) => {
					console.log(error)
				  }
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	// @import "uview-ui/index.scss";
	/*每个页面公共css */
	@import '@/static/css/common.css';
	page{
		background-color: #f7f7f7;
	}
	.status_bar {
		height: var(--status-bar-height);  
		width: 100%;  
		background-color: #ffffff; 
	} 
	.top_view {  
		height: var(--status-bar-height);  
		width: 100%;  
		position: fixed;  
		background-color: #ffffff;
		top: 0;  
		z-index: 999;  
	}
	button::after {
	 	border: none;
	}
    .titleText{
    		  position: relative;
    		  z-index: 22;
    		  text-align: center;
    		  font-size: 32rpx;
    		  color: #FFFFFF;
    }
    .bgShadow{
        box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(9,2,4,0.03);
    }
    .peopleInfo{
        background-color: rgba(9, 2, 4, 0.03);
        position: relative;
        border-radius: 15rpx;
        margin-top: 27rpx;
            .peoplename{
                width: 100%;
                position: absolute;
                    bottom: 24rpx;
                    z-index: 999;
                    padding: 0 20rpx;
                    color: #fff;
                    font-weight: bold;
                    font-size: 30rpx;
            }
            .peopleTag{
                position: absolute;
                width: 100%;
                position: absolute;
                left: 14rpx;
                    top: 24rpx;
                    .taginfo{
                        font-weight: 500;
                        font-size: 20rpx;
                        color: #FFFFFF;
                        width: 127rpx;
                        box-sizing: content-box;
                        height: 37rpx;
                        background: #FFAC26;
                        border-radius: 30rpx;
                        border: 1px solid #F8E6C8;
                            align-items: center;
                            display: flex;
                            justify-content: center;
                        // padding: 4rpx 10rpx;
                    }
                    .tagStatus{
                        align-items: center;
                        display: flex;
                        font-weight: 400;
                        font-size: 20rpx;
                        padding: 6rpx 9rpx 6rpx 15rpx;
                        background: rgba(0,0,0,0.4);
                        justify-content: center;
                        width: auto;
                            display: inline-flex;
                            right: 16rpx;
                            position: absolute;
                            border-radius: 15rpx 0 0 15rpx;
                            top: 0;
                            color: #fff;
                        .point{
                            width: 8rpx;
                            height: 8rpx;
                            border: 1px solid #FFFFFF;
                            background-color: #25CE87;
                            border-radius: 50%;
                            display: inline-block;
                            margin-right: 4rpx;
                        }
                    }
            }
    }
    .header{
        background-color: #fff;
        padding:20rpx 0;
    }
    .headerSearch{
        margin: 0 25rpx;
        height: 87rpx;
        background: #F5F5F5;
        border-radius: 40rpx;
        padding: 0 30rpx;
        .city{
            font-weight: 400;
            font-size: 30rpx;
            color: #111111;
        }
        .line{
            display: block;
            width: 2rpx;
            height: 21rpx;
            background-color: #B3B3B3;;
        }
    }
    .headerBg{
            position: relative;
            min-height: 450rpx;
            padding-bottom: 50rpx;
            background: #00BA7F;
           
    }
    .popcontent {
        width: 661rpx;
        height: 674rpx;
        background: #FFFFFF;
        border-radius: 25rpx;
        margin-bottom: 50rpx;
    
        .popTitle {
            font-weight: bold;
            font-size: 36rpx;
            color: #333333;
        }
    
        .attr {
            background-color: #F5F5F5;
            height: 60rpx;
            border: 1px solid #E4E4E4;
            color: #777;
            font-size: 26rpx;
            line-height: 60rpx;
            padding-left: 35rpx;
    
            text {
                color: #333;
            }
        }
    
        .allMoney {
            height: 103rpx;
            padding: 0 24rpx 0 34rpx;
            font-weight: bold;
    
            .money {
    
                font-size: 26rpx;
                color: #333333;
    
                text {
    
                    font-size: 33rpx;
                    color: #FF4345;
                }
            }
    
            .addcart {
                width: 179rpx;
                height: 56rpx;
                background: #00C584;
                border-radius: 8rpx;
    
                font-size: 27rpx;
                color: #FFFFFF;
                text-align: center;
                line-height: 56rpx;
            }
        }
    
        .attrList {
            margin-top: 24rpx;
    
            view {
                width: 129rpx;
                height: 52rpx;
                background: rgba(255, 67, 69, 0);
                border-radius: 12rpx;
                border: 1px solid #D0D0D0;
                text-align: center;
                line-height: 52rpx;
                font-size: 26rpx;
                margin-right: 20rpx;
            }
    
            .active {
                background: rgba(254, 171, 97, 0.1);
                font-weight: bold;
    
                color: #FEAB61;
                border: 1px solid #FEAB61;
            }
        }
    }
    .orderTitle {
    	width: 750rpx;
    	height: 98rpx;
    	background-color: #FFFFFF;
    	display: flex;
    	font-size: 26rpx;
    	color: #666666;
    	border-bottom: 2rpx solid rgba(151, 151, 151, 0.062);
    
    	.titleItem {
    		height: 98rpx;
    		line-height: 98rpx;
    		text-align: center;
    		flex-basis: 0rpx;
    		flex-grow: 1;
    		font-weight: 600;
    	}
    
    	.active {
    		height: 98rpx;
    		line-height: 98rpx;
    		text-align: center;
    		flex-basis: 0rpx;
    		flex-grow: 1;
    		font-weight: bold;
    		font-size: 30rpx;
    		color: #00C584;
    		position: relative;
    
    	}
    
    	.active::after {
    		position: absolute;
    		content: "";
    		width: 74rpx;
    		height: 4rpx;
    		bottom: 0rpx;
    		left: 50%;
    		transform: translateX(-50%);
    		background: #2CC6A1;
    	}
    }
</style>
